<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ZoomMarker_Demo</title>

    <link rel="stylesheet" href="css/zoom-marker.css">

    <style>
        .zoom-marker-navigator{
            width: 100%;
            margin: 10px;
            text-align: center;
        }
    </style>

</head>
<body>

<div class="zoom-marker-navigator">
    <button id="zoom-marker-btn-switch">switch picture</button>
    <button id="zoom-marker-btn-clean">clean marker</button>
    <button id="zoom-marker-btn-loading">show loader</button>
    <button id="zoom-marker-btn-enable-drag">disable drag</button>
    <button id="zoom-marker-btn-reset">reset</button>
    <select id="imgChooile">
        <option value="img/1.png">
            1.png
        </option>
        <option value="img/2.png">
            2.png
        </option>
    </select>
</div>

<div id="zoom-marker-div" class="zoom-marker-div">
    <!-- <img class="zoom-marker-img" id="zoom-marker-img" alt="zoom-marker-img" name="zoom-marker-img"  draggable="false"/> -->
    <img class="zoom-marker-img" id="zoom-marker-img-alt" alt="zoom-marker-img-alt" name="zoom-marker-img-alt"  draggable="false"/>
</div>

</body>

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/hammer.min.js"></script>

<script src="js/zoom-marker.min.js"></script>
<!-- <script src="js/easy-loading.js"></script> -->

<script>

    /******************* init navigator button, no need for users' initialization *********************/
    var picTag = 0;
    var tagNumber = 1;
    $('#zoom-marker-btn-switch').click(function(e){
        $('#zoom-marker-img').zoomMarker_CleanMarker();
        if(picTag===0){
            $('#zoom-marker-img').zoomMarker_LoadImage("img/rail.jpg");
        }
        else if(picTag===1){
            $('#zoom-marker-img').zoomMarker_LoadImage("img/mountain.jpg");
        }
        picTag = 1-picTag;
    });

    $('#zoom-marker-btn-clean').click(function(e){
        $('#zoom-marker-img').zoomMarker_CleanMarker();
        $('#zoom-marker-img').zoomMarker_CanvasClean();
    });

    // this array stores the styles for EASY-LOADING
    var styleList = [
        "BALL_PULSE",
        "BALL_CLIP_ROTATE", "BALL_CLIP_ROTATE_PULSE", "SQURE_SPIN", "BALL_CLIP_ROTATE_MULTIPLE",
        "BALL_PULSE_RISE", "BALL_ROTATE", "CUBE_TRANSITION", "BALL_ZIP_ZAG", "BALL_ZIP_ZAG_DEFLECT",
        "BALL_TRIANGLE_PATH", "BALL_SCALE", "LINE_SCALE", "LINE_SCALE_PARTY", "BALL_SCALE_MULTIPLE",
        "BALL_PULSE_SYNC", "BALL_BEAT", "LINE_SCALE_PULSE_OUT", "LINE_SCALE_PULSE_OUT_RAPID",
        "BALL_SCALE_RIPPLE", "BALL_SCALE_RIPPLE_MULTIPLE", "BALL_SPIN_FADE_LOADER", "LINK_SPIN_FADE_LOADER",
        "TRIANGLE_SKEW_SPIN", "PACMAN", "SEMI_CIRCLE_SPIN"
    ];

    var stylePosition = 0;
    $('#zoom-marker-btn-loading').click(function(e){
        // EasyLoading.show({
        //     text: $("<span>"+styleList[stylePosition]+"</span>"),
        //     button:$("<span>dismiss</span>"),
        //     type: EasyLoading.TYPE[styleList[stylePosition]],
        //     //timeout: EasyLoading.TIMEOUT.FAST,
        //     callback: function(event, data){
        //         switch(event){
        //             case 'on_btn_click' : console.log(data); break;
        //             case 'on_loaded' : console.log("callback with options:"+JSON.stringify(data)); break;
        //         }
        //     }
        // });
        if(++stylePosition>=styleList.length)
            stylePosition = 0;
    });

    var isEnableDrag = true;
    $('#zoom-marker-btn-enable-drag').click(function(e) {
        isEnableDrag = !isEnableDrag;
        $('#zoom-marker-img').zoomMarker_EnableDrag(isEnableDrag);
        if(isEnableDrag) {
            $('#zoom-marker-btn-enable-drag').text('disable drag');
        } else {
            $('#zoom-marker-btn-enable-drag').text('enable drag');
        }
    });

    $('#zoom-marker-btn-reset').click(function(e) {
        $('#zoom-marker-img').zoomMarker_ResetImage();
    });

    // init item
    var initImg = function(item) {
        // handle "TAP" event and add marker to image
        item.on("zoom_marker_mouse_click", function(event, position){
            console.log("Mouse click on: "+JSON.stringify(position));
            const marker = item.zoomMarker_AddMarker({
                src:"img/marker.svg",
                x:position.x,
                y:position.y,
                size:30,
                dialog:{},
                hint:{value:tagNumber, style:{color:"#ffffff", left:"10px"}}
            });
            // 手动配置dialog
            marker.param.dialog = {
                value: "<h4>content for dialog_"+tagNumber+"</h4>",
                offsetX: 20,
                style: {
                    "border-color": "#86df5f"
                }
            };
            // 画线
            const context = item.zoomMarker_Canvas();
            if(context !== null) {
                context.strokeStyle = 'red';
                context.moveTo(position.x, position.y);
                context.lineTo(100,100);
                context.stroke();
            }
            if(++tagNumber>=10)
                tagNumber=1;
        });

        // listen to marker click event, print to console and delete the marker
        item.on("zoom_marker_click", function(event, marker){
            console.log(JSON.stringify(marker));
            //$('#zoom-marker-img').zoomMarker_RemoveMarker(marker.id);
        });

        // message for the beginning of image loading process
        item.on("zoom_marker_img_load", function(event, src){
            console.log("loading started for image : "+src);
            // EasyLoading.show({
            //     text: $("<span>loading image</span>"),
            //     button:$("<span>dismiss</span>"),
            //     type: EasyLoading.TYPE.PACMAN
            // });
        });

        // message for image loaded
        item.on("zoom_marker_img_loaded", function(event, size){
            console.log("image has been loaded with size: "+JSON.stringify(size));
            // we have to set a timer in order to watching the loader in local environment, cause the loading speed is too fast
            // setTimeout(function(){
            //     EasyLoading.hide();
            // }, 3000);
        });

        // message after at the end of Maker moving action
        item.on("zoom_marker_move_end", function(event, position){
            console.log("Marker moving ended on :" + JSON.stringify(position));
        })
    }

    initImg($('#zoom-marker-img'));
    initImg($('#zoom-marker-img-alt'));

    /******************** INIT ZoomMarker here *****************************/
    $(document).ready(function () {
        $('#zoom-marker-img-alt').zoomMarker({
            src: "img/1.png",
            rate: 0.2,
            width: 600,
            max: 3000,
            markers:[
                {src:"img/marker.svg", x:300, y:300}
            ]
        });

        $("#imgChooile").change(function(){
            console.log($("#imgChooile").val());
           // $("#zoom-marker-img-alt").zoomMarker_CleanMarker();
            $("#zoom-marker-img-alt").zoomMarker_LoadImage($("#imgChooile").val());
            $("#zoom-marker-img-alt").zoomMarker_ResetImage();
        });
        // $('#zoom-marker-img').zoomMarker({
        //     src: "img/mountain.jpg",
        //     rate: 0.2,
        //     width: 400,
        //     max: 3000,
        //     markers:[
        //         {src:"img/marker.svg", x:200, y:200, draggable:false}
        //     ],
        //     enable_canvas: true,
        //     move_limit: true
        // });
    })
    /******************** INIT ZoomMarker here *****************************/

</script>

</html>
